<template>
  <div>
    <div id="top">
      <top></top>
    </div>
    <div id="content">
      <div id="left">
        <Left :movies="movies" :title="'喜爱的'+type" :intro="'这是我喜欢的电影列表'" v-show="show_movie" ref="lm"></Left>
      </div>
      <div id="center">
        <!-- v-if是直接把节点删除，而不是display:none-->
        <center v-if="show_movie" :num="num" @unum="updateNum"></center>
      </div>
      <div id="right">
        <input type="button" value="设置" @click="show_movie=!show_movie">
        <input type="button" value="改变获取数据" @click="change_data()">
        <input type="text" name="" id="" v-model="msg">
        <h2>{{ num }}</h2>
        <hr>
        <ul v-if="show_user">
          <li v-for="u in users" :key="u.username">
            {{ u.username }}--{{ u.age }}--{{ u.password }}
          </li>
        </ul>
        <ul v-else>
          <li v-for="s in stus" :key="s.name">
            {{ s.name }}---{{ s.age }}
          </li>
        </ul>
        <hr>
        <h1 ref="ttitle">测试标题</h1>
        <hr>
        <!-- <com01></com01>
        <com02></com02> -->
        <component :is="com"></component>
        <hr>
        <input type="button" value="组件1" @click="com='com01'"> &nbsp;
        <input type="button" value="组件2" @click="com='com02'">
      </div>
      <div class="clear"></div>
    </div>
    <div id="bottom">
      <bottom></bottom>
    </div>
  </div>
</template>

<script>
import Top from '@/components/Top.vue'
import Bottom from '@/components/Bottom.vue'
import Left from '@/components/Left.vue'
import Center from '@/components/Center.vue'
import axios from 'axios'
import com01 from '@/components/com01.vue'
import com02 from '@/components/com02.vue'
export default {
  name: 'App',
  data: function () {
    return {
      movies: [
        '肖申克的救赎',
        '阿甘正传',
        '蝙蝠侠之黑暗骑士',
        '盗梦空间'
      ],
      type: '电影',
      num: 10,
      show_movie: true,
      msg: '测试改变',
      users: [],
      stus: [],
      show_user: true,
      com: 'com01'
    }
  },
  methods: {
    updateNum (n) {
      this.num = n
    },
    show () {
      console.log('show')
    },
    change_data () {
      if (this.show_user) {
        // 获取stus
        this.show_user = false
        this.users = []
        axios.get('http://127.0.0.1:5500/02/stus.json').then(resp => {
          this.stus = resp.data.stus
        })
      } else {
        this.show_user = true
        this.stus = []
        axios.get('http://127.0.0.1:5500/02/users.json').then(resp => {
          this.users = resp.data.users
        })
      }
    }
  },
  components: {
    Top, Bottom, Left, Center, com01, com02
  },
  updated () {
    // 只要页面更新就会执行
    console.log('app updated')
  },
  mounted () {
    // ref的意义就是为html中的节点添加标识，能够比较方便的找到，如果不用refs，用documnet.querySelectAll也是完全可以的
    console.log(this.$refs.ttitle)
    this.$refs.ttitle.style.color = '#f00'
    console.log(this.$refs.lm.user)// 可以直接通过refs来获取子组件的信息

    // axios.get('http://127.0.0.1:5500/02/users.json').then(resp => {
    //   console.log(resp)
    //   this.users = resp.data.users
    // })
  }
  // beforeCreate () {
  //   // beforeCreated特别早，方法和数据都没有
  //   console.log('before created')
  //   // console.log(this.type)
  //   // this.show()
  // },
  // created () {
  //   // 因为data已经存在了，此时已经可以设置数据了
  //   console.log('created')
  //   this.show()
  //   // created之后数据已经初始化了，但是页面信息还没有
  //   const d = document.querySelector('#top')
  //   console.log(d)
  // },
  // beforeMount () {
  //   console.log('before mount')
  //   console.log(this.type)
  //   console.log(document.querySelector('#top'))
  // },
  // mounted () {
  //   // 页面元素已经加载完成了，此时来设置数据也是可以的
  //   console.log('before mount')
  //   console.log(this.type)
  //   console.log(document.querySelector('#top'))
  // }
}
</script>

<style scoped>
*{
  margin:0px;
  padding: 0px;
}
*.clear {
  clear: both;
}
#top {
  background: #ddd;
  height:120px;
  width: 1200px;
  margin: auto;
}
#content {
  width: 1200px;
  margin: auto;
}
#bottom {
  background: #333;
  height:120px;
  width: 1200px;
  margin: auto;
  color: #fff;
}
#left,#center,#right {
  float:left;
  width: 395px;
  height:400px;
  border-right:1px solid #aaa;
}
</style>
